import { FC } from "react";
import { componentGroup } from "../../questioncomponents";
import style from './index.module.scss'
import classnames from 'classnames/bind'
import { Space, Typography } from "antd";
import { componentConfigType } from "../../questioncomponents";
import { addComponent } from "../../store/ComponentReducer";
import { useDispatch } from "react-redux";
import { nanoid } from 'nanoid'

const { Title } = Typography
const CBN = classnames.bind(style)

const ComponentLib: FC = () => {
    const dispatch = useDispatch()
    const addLibComponent = (item: componentConfigType) => {
        const { defaultvalue, type } = item
        const id = nanoid()
        dispatch(addComponent({
            title:'默认',
            fe_id: id,
            type,
            hide:false,
            lock:false,
            props: defaultvalue
        }))
    }

    return <div className={CBN('Componentlib')}>
        {
            componentGroup.map((item,index) => {
                const {id, groupname, componengList } = item
                return <div key={id} style={{ width: '100%', marginBottom: '10px' }}>
                    <Space direction={'vertical'} style={{ width: '100%' }}>
                        <Space>
                            <Title level={3} style={{ margin: 0 }}>{groupname}</Title>
                        </Space>

                        {
                            componengList.map((item, index) => {
                                const { Component, defaultvalue, } = item
                                return <div  key={index} className={CBN('ComponentItem')} onClick={() => {
                                    addLibComponent(item)
                                }}>
                                    <div style={{ pointerEvents: 'none' }}>
                                        <Component {...defaultvalue}></Component>
                                    </div>
                                </div>
                            })
                        }

                    </Space>
                </div>
            })
        }

    </div>
}

export default ComponentLib